<template>
  <el-header class="top-header">
    <div class="left-section">
      <el-button 
        type="primary" 
        link 
        @click="goToHome"
        :icon="ArrowLeft"
      >
        返回首页
      </el-button>
    </div>
    <div class="right-section">
      <template v-if="isLoggedIn">
        <span class="time">{{ currentTime }}</span>
        <el-dropdown trigger="click">
          <div class="user-info">
            <el-avatar :size="32" :src="userAvatar" />
            <span class="nickname">{{ userNickname }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToProfile">
                <el-icon><User /></el-icon>个人中心
              </el-dropdown-item>
              <el-dropdown-item @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template v-else>
        <el-button type="primary" plain @click="goToLogin">登录</el-button>
        <el-button type="success" plain @click="goToRegister">注册</el-button>
      </template>
    </div>
  </el-header>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { ArrowLeft, User, SwitchButton } from '@element-plus/icons-vue'
import { logout } from '@/api/auth'
import { useUserStore } from '../stores/user'

const router = useRouter()
const userStore = useUserStore()
const showDropdown = ref(false)
const currentTime = ref('')
const isLoggedIn = computed(() => userStore.isLogin)
const userAvatar = ref('/assets/logo.jpeg')

const userNickname = computed( () => userStore.userName)

// 更新时间函数
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString()
}

// 初始化定时器
onMounted(() => {
  updateTime()
  const timer = setInterval(updateTime, 1000)
  onUnmounted(() => clearInterval(timer))

  console.log('TopHeader mounted,'+ userStore.userName)
})

const goToHome = () => {
  router.push({
    path: '/lz/study',
    query: {
      timestamp: new Date().getTime()
    }
  })
}

const goToProfile = () => {
  router.push('/lz/study/profile')
}

const goToLogin = () => {
  router.push('/lz/study/login')
}

const goToRegister = () => {
  router.push('/lz/study/register')
}

const handleLogout = async () => {
  try {
    // 处理退出登录逻辑
    isLoggedIn.value = false
    const res = await logout();
    if (res.code === 200) {
      ElMessage.success('退出登录成功')
    } else {
      ElMessage.error(res.message || '退出登录失败')
    }
  }catch ( error){
    ElMessage.error('退出登录失败')
  } finally {
    userStore.removeToken()
    router.push('/lz/study/login')
  }
}
</script>

<style scoped>
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(173, 216, 230, 0.95); /* 改为淡蓝色背景 */
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(31, 38, 135, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

.time {
  margin-right: 20px;
  font-size: 14px;
  color: #333;
}

.left-section {
  display: flex;
  align-items: center;
}

.left-section :deep(.el-button) {
  border-radius: 20px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(31, 38, 135, 0.05);
}

.left-section :deep(.el-button:hover) {
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(31, 38, 135, 0.1);
}

.right-section {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 24px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(31, 38, 135, 0.05);
  min-width: 180px;
  justify-content: center;
}

.user-info:hover {
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(31, 38, 135, 0.1);
}

.nickname {
  font-size: 14px;
  color: var(--el-text-color-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style> 